<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunbolist" :key="item.id"><img :src="item.img" alt=""/></van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid class="my-grid" :column-num="3">
      <van-grid-item v-for="grid in grids" :key="grid.id" :icon="grid.src" :text="grid.title" :to="grid.to" />
    </van-grid>
  </div>
</template>
<script>
// import { getLunbo, getGrids } from '../../api'
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created() {
    this.getLunbo()
    this.getGrids()
    // const res = await this.Api.getLunbo()
    // console.log(res)
  },
  methods: {
    async getLunbo() {
      try {
        const res = await this.Api.getLunbo()
        const {
          data: { message }
        } = res
        this.lunbolist = message
      } catch (error) {
        this.$Toast('error')
      }
    },
    async getGrids() {
      try {
        const res = await this.Api.getGrids()
        const {
          data: { message }
        } = res
        this.grids = message
      } catch (error) {
        this.$Toast('error')
      }
    }
  }
}
</script>
// lang 设置使用某个预编译语言 // scoped 限制当前样式只能在当前组件使用
<style lang="less" scoped>
.home {
  .my-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .my-grid {
    .van-grid-item__icon {
      font-size: 50px;
    }
  }
}
</style>
